<template>
  <div class="slaughter-info">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>屠宰信息管理</h2>
      <p class="page-description">管理屠宰过程中的各项信息，包括基本信息、检验记录和企业信息</p>
    </div>

    <!-- 屠宰信息设置 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>屠宰信息</h3>
          <el-button type="primary" size="small" @click="openSlaughterSettings">
            <el-icon><Setting /></el-icon>
            设置
          </el-button>
        </div>
      </template>

      <!-- 屠宰基本信息 -->
      <div class="slaughter-basic-info" :data="SlaughterData">
        <div class="info-grid">
          <div class="info-item">
            <label>生产批次</label>
            <span>{{ SlaughterData.batch || '未设置' }}</span>
          </div>
          <div class="info-item">
            <label>到厂均重</label>
            <span>{{ SlaughterData.weight || 0 }}公斤</span>
          </div>
          <div class="info-item">
            <label>到场时间</label>
            <span>{{ formatDateTime(SlaughterData.startTime) }}</span>
          </div>
          <div class="info-item">
            <label>屠宰时间</label>
            <span>{{ formatDateTime(SlaughterData.endTime) }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 相关资质 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>相关资质</h3>
          <span class="upload-tip">支持多张图片上传</span>
        </div>
      </template>

      <div class="qualification-uploads">
        <div class="uploaded-qualifications">
          <div
            v-for="(qualification, idx) in qualificationPhotos"
            :key="qualification.id"
            class="qualification-item"
          >
            <img v-if="qualification.imagePath" :src="qualification.imagePath" class="qualification-img" />
            <el-icon class="img-delete-x" @click="deleteQualification(qualification.id)">
              <Close />
            </el-icon>
          </div>
          <!-- 上传按钮，最多9张 -->
          <label v-if="qualificationPhotos.length < 10" class="qualification-upload">
            <input
              type="file"
              accept="image/*"
              name="ImageFile"
              style="display: none"
              @change="handleQualificationUpload"
            />
            <el-icon class="plus-icon"><Plus /></el-icon>
          </label>
        </div>
      </div>
    </el-card>

    <!-- 屠宰企业信息 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>企业信息</h3>
          <el-button type="primary" size="small" @click="openEnterpriseSettings">
            <el-icon><Setting /></el-icon>
            设置
          </el-button>
        </div>
      </template>

      <div class="enterprise-details" :data="EnterpriseData">
        <div class="info-grid">
          <div class="info-item">
            <label>公司名称</label>
            <span>{{ EnterpriseData.companyName || '未设置' }}</span>
          </div>
          <div class="info-item">
            <label>公司地址</label>
            <span>{{ EnterpriseData.address || '未设置' }}</span>
          </div>
          <div class="info-item">
            <label>成立时间</label>
            <span>{{ EnterpriseData.sTime ? moment(EnterpriseData.sTime).format("YYYY-MM-DD") : '未设置' }}</span>
          </div>
          <div class="info-item">
            <label>生产批次</label>
            <span>{{ EnterpriseData.batch || '未设置' }}</span>
          </div>
        </div>
        <div class="company-description">
          <label>公司简介</label>
          <p>{{ EnterpriseData.companyDesc || '暂无简介' }}</p>
        </div>
      </div>
    </el-card>

    <!-- 企业照片 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>企业照片</h3>
          <span class="upload-tip">支持多张图片上传</span>
        </div>
      </template>

      <div class="photo-uploads">
        <div class="uploaded-photos">
          <div
            v-for="(photo, idx) in enterprisePhotos"
            :key="photo.id"
            class="photo-item"
          >
            <img v-if="photo.imagePath" :src="photo.imagePath" class="photo-img" />
            <el-icon class="img-delete-x" @click="deleteEnterprisePhoto(photo.id)">
              <Close />
            </el-icon>
          </div>
          <!-- 上传按钮，最多9张 -->
          <label v-if="enterprisePhotos.length < 10" class="photo-upload">
            <input
              type="file"
              accept="image/*"
              name="ImageFile"
              style="display: none"
              @change="handleEnterprisePhotoUpload"
            />
            <el-icon class="plus-icon"><Plus /></el-icon>
          </label>
        </div>
      </div>
    </el-card>

    <!-- 屠宰信息设置弹框 -->
    <el-dialog v-model="slaughterDialogVisible" title="屠宰信息设置" width="600px">
      <el-form :model="slaughterForm" :rules="slaughterRules" ref="slaughterFormRef" label-width="120px">
        <el-form-item label="生产批次:" prop="batch">
          <el-input v-model="slaughterForm.batch" disabled placeholder="生产批次" />
        </el-form-item>
        <el-form-item label="到厂均重:" prop="weight">
          <el-input-number v-model="slaughterForm.weight" :min="1" :precision="2" placeholder="到厂均重(公斤)" />
        </el-form-item>
        <el-form-item label="到场时间:" prop="startTime">
          <el-date-picker v-model="slaughterForm.startTime" type="datetime" placeholder="选择到场时间" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="屠宰时间:" prop="endTime">
          <el-date-picker v-model="slaughterForm.endTime" type="datetime" placeholder="选择屠宰时间" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="slaughterDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSlaughterInfo">保存</el-button>
      </template>
    </el-dialog>

    <!-- 企业信息设置弹框 -->
    <el-dialog v-model="enterpriseDialogVisible" title="企业信息设置" width="600px">
      <el-form :model="enterpriseForm" :rules="enterpriseRules" ref="enterpriseFormRef" label-width="120px">
        <el-form-item label="公司名称:" prop="companyName">
          <el-input v-model="enterpriseForm.companyName" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="公司地址:" prop="address">
          <el-input v-model="enterpriseForm.address" type="textarea" placeholder="请输入公司地址" />
        </el-form-item>
        <el-form-item label="公司简介:" prop="companyDesc">
          <el-input v-model="enterpriseForm.companyDesc" type="textarea" :rows="4" placeholder="请输入公司简介" />
        </el-form-item>
        <el-form-item label="成立时间:" prop="sTime">
          <el-date-picker v-model="enterpriseForm.sTime" type="date" placeholder="选择成立时间" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="生产批次:">
          <el-input v-model="enterpriseForm.batch" disabled placeholder="生产批次" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="enterpriseDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEnterpriseInfo">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Plus, Close, Setting } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Traceability } from '@/Utils/Http'
import { useRoute } from 'vue-router'
import moment from 'moment'

const route = useRoute()


// 接口定义
interface QualificationItem {
  id: string
  imagePath?: string
  url?: string
}

interface PhotoItem {
  id: string
  imagePath?: string
  url?: string
}

// 屠宰信息数据
const SlaughterData = ref<any>([])

// 企业信息数据
const EnterpriseData = ref<any>([])

// 相关资质数据
const qualificationPhotos = ref<QualificationItem[]>([])

// 企业照片数据
const enterprisePhotos = ref<PhotoItem[]>([])

// 弹框相关
const slaughterDialogVisible = ref(false)
const enterpriseDialogVisible = ref(false)

// 表单引用
const slaughterFormRef = ref()
const enterpriseFormRef = ref()

// 屠宰信息表单
const slaughterForm = reactive({
  id: 0,
  batch: route.query.batch as string || '',
  weight: 0,
  startTime: '',
  endTime: ''
})

// 企业信息表单
const enterpriseForm = reactive({
  id: 0,
  companyName: '',
  address: '',
  companyDesc: '',
  sTime: '',
  batch: route.query.batch as string || ''
})

// 屠宰信息验证规则
const slaughterRules = {
  weight: [
    { required: true, message: '请输入到厂均重', trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: '请选择到场时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请选择屠宰时间', trigger: 'change' }
  ]
}

// 企业信息验证规则
const enterpriseRules = {
  companyName: [
    { required: true, message: '请输入公司名称', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入公司地址', trigger: 'blur' }
  ],
  companyDesc: [
    { required: true, message: '请输入公司简介', trigger: 'blur' }
  ],
  sTime: [
    { required: true, message: '请选择成立时间', trigger: 'change' }
  ]
}

// 获取屠宰信息
const getSlaughterInfo = () => {
  Traceability.get('/Slaughter/GetSlaughterQuery', {
    params: { Batch: route.query.batch }
  }).then(res => {
    if (res.data.code == 200) {
      SlaughterData.value = res.data.data
      // 反填表单数据
      if (SlaughterData.value && Object.keys(SlaughterData.value).length > 0) {
        slaughterForm.id = SlaughterData.value.id || 0
        slaughterForm.batch = route.query.batch as string || '' // 始终使用路由参数
        slaughterForm.weight = SlaughterData.value.weight || 0
        slaughterForm.startTime = convertISOToElementFormat(SlaughterData.value.startTime)
        slaughterForm.endTime = convertISOToElementFormat(SlaughterData.value.endTime)
      }
    }
  }).catch(error => {
    console.error('获取屠宰信息失败:', error)
    // 如果获取失败，使用默认值
    SlaughterData.value = {
      batch: route.query.batch || 'BATCH001',
      weight: 0,
      startTime: '',
      endTime: ''
    }
    slaughterForm.batch = (route.query.batch as string) || 'BATCH001'
  })
}

// 获取企业信息
const getEnterpriseInfo = () => {
  Traceability.get('/Slaughter/GetSlaughterCommpanyQuery', {
    params: { Batch: route.query.batch }
  }).then(res => {
    if (res.data.code == 200) {
      EnterpriseData.value = res.data.data
      // 反填表单数据
      if (EnterpriseData.value && Object.keys(EnterpriseData.value).length > 0) {
        enterpriseForm.id = EnterpriseData.value.id || 0
        enterpriseForm.companyName = EnterpriseData.value.companyName || ''
        enterpriseForm.address = EnterpriseData.value.address || ''
        enterpriseForm.companyDesc = EnterpriseData.value.companyDesc || ''
        enterpriseForm.sTime = EnterpriseData.value.sTime ? convertISOToElementFormat(EnterpriseData.value.sTime) : ''
        enterpriseForm.batch = route.query.batch as string || '' // 始终使用路由参数
      }
    }
  }).catch(error => {
    console.error('获取企业信息失败:', error)
    // 如果获取失败，使用默认值
    EnterpriseData.value = {
      companyName: '',
      address: '',
      companyDesc: '',
      establish: '',
      batch: route.query.batch || 'BATCH001'
    }
    enterpriseForm.batch = (route.query.batch as string) || 'BATCH001'
  })
}

// 获取相关资质图片
const fetchQualificationImages = async () => {
  try {
    const batch = route.query.batch as string
    const res = await Traceability.get('/UploadBatchImage/GetBatchImagesQuery', {
      params: { ImageType: 4, BatchNo: batch }
    })
    
    // 过滤出有效的图片数据
    qualificationPhotos.value = Array.isArray(res.data.data)
      ? res.data.data.filter((item: any) => !!item && !!item.imagePath)
      : []
  } catch (error) {
    console.error('获取相关资质图片失败:', error)
  }
}

// 上传相关资质图片
const handleQualificationUpload = async (event: Event) => {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  
  if (qualificationPhotos.value.length + files.length > 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  
  const formData = new FormData()
  formData.append('ImageFile', files[0])
  formData.append('BatchNo', route.query.batch as string)
  formData.append('ImageType', '4')
  
  try {
    const res = await Traceability.post('/UploadBatchImage/UploadBatch', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    if (res.data && res.data.code === 300) {
      ElMessage.success('相关资质上传成功')
      // 上传成功后刷新图片列表
      await fetchQualificationImages()
    } else {
      ElMessage.error(res.data?.message || '上传失败')
    }
  } catch (error) {
    console.error('上传相关资质图片失败:', error)
    ElMessage.error('上传失败')
  }
  
  // 清空文件输入，允许重复选择相同文件
  ;(event.target as HTMLInputElement).value = ''
}

// 删除相关资质图片
const deleteQualification = async (id: string) => {
  try {
    await ElMessageBox.confirm('确定删除相关资质图片么?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const res = await Traceability.delete('/UploadBatchImage/DelBatchImage', {
      params: {
        Id: id,
        ImageType: '4'
      }
    })
    
    // 检查响应状态
    if (res.data && res.data.code === 500) {
      ElMessage.success('删除成功')
      // 删除成功后刷新图片列表
      await fetchQualificationImages()
    } else {
      ElMessage.error(res.data?.message || '删除失败')
    }
  } catch (error) {
    if (error === 'cancel') {
      // 用户取消删除
      return
    }
    console.error('删除相关资质图片失败:', error)
    ElMessage.error('删除失败')
  }
}

// 创建文件输入元素用于多图片上传
const createFileInput = (accept: string = 'image/*', multiple: boolean = true) => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = accept
  input.multiple = multiple
  input.style.display = 'none'
  return input
}

// 处理文件选择
const handleFileSelect = (files: FileList, targetArray: any[], type?: string) => {
  const maxFiles = 10 // 最大上传数量
  if (files.length + targetArray.length > maxFiles) {
    ElMessage.warning(`最多只能上传${maxFiles}张图片`)
    return
  }

  Array.from(files).forEach(file => {
    if (file.type.startsWith('image/')) {
      const reader = new FileReader()
      reader.onload = (e) => {
        if (e.target?.result) {
          const item = { url: e.target.result as string }
          if (type) {
            (item as any).type = type
          }
          targetArray.push(item)
        }
      }
      reader.readAsDataURL(file)
    } else {
      ElMessage.warning('请选择图片文件')
    }
  })
}

// 获取企业照片
const fetchEnterprisePhotoImages = async () => {
  try {
    const batch = route.query.batch as string
    const res = await Traceability.get('/UploadBatchImage/GetBatchImagesQuery', {
      params: { ImageType: 5, BatchNo: batch }
    })
    
    // 过滤出有效的图片数据
    enterprisePhotos.value = Array.isArray(res.data.data)
      ? res.data.data.filter((item: any) => !!item && !!item.imagePath)
      : []
  } catch (error) {
    console.error('获取企业照片失败:', error)
  }
}

// 上传企业照片
const handleEnterprisePhotoUpload = async (event: Event) => {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  
  if (enterprisePhotos.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  
  const formData = new FormData()
  formData.append('ImageFile', files[0])
  formData.append('BatchNo', route.query.batch as string)
  formData.append('ImageType', '5')
  
  try {
    const res = await Traceability.post('/UploadBatchImage/UploadBatch', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    if (res.data && res.data.code === 300) {
      ElMessage.success('企业照片上传成功')
      // 上传成功后刷新图片列表
      await fetchEnterprisePhotoImages()
    } else {
      ElMessage.error(res.data?.message || '上传失败')
    }
  } catch (error) {
    console.error('上传企业照片失败:', error)
    ElMessage.error('上传失败')
  }
  
  // 清空文件输入，允许重复选择相同文件
  ;(event.target as HTMLInputElement).value = ''
}

// 删除企业照片
const deleteEnterprisePhoto = async (id: string) => {
  try {
    await ElMessageBox.confirm('确定删除企业图片么?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const res = await Traceability.delete('/UploadBatchImage/DelBatchImage', {
      params: {
        Id: id,
        ImageType: '5'
      }
    })
    
    // 检查响应状态
    if (res.data && res.data.code === 500) {
      ElMessage.success('删除成功')
      // 删除成功后刷新图片列表
      await fetchEnterprisePhotoImages()
    } else {
      ElMessage.error(res.data?.message || '删除失败')
    }
  } catch (error) {
    if (error === 'cancel') {
      // 用户取消删除
      return
    }
    console.error('删除企业照片失败:', error)
    ElMessage.error('删除失败')
  }
}

// 图片预览
const previewImage = (url: string) => {
  ElMessage.info('图片预览功能')
}

// 格式化日期时间为年月日时分秒格式
const formatDateTime = (dateStr: string) => {
  if (!dateStr) return '未设置'
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 将ISO格式时间转换为Element Plus日期选择器格式
const convertISOToElementFormat = (isoStr: string) => {
  if (!isoStr) return ''
  const date = new Date(isoStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 打开屠宰信息设置弹框
const openSlaughterSettings = () => {
  // 反填现有数据
  if (SlaughterData.value && Object.keys(SlaughterData.value).length > 0) {
    slaughterForm.id = SlaughterData.value.id || 0
    slaughterForm.batch = route.query.batch as string || '' // 始终使用路由参数
    slaughterForm.weight = SlaughterData.value.weight || 0
    slaughterForm.startTime = convertISOToElementFormat(SlaughterData.value.startTime)
    slaughterForm.endTime = convertISOToElementFormat(SlaughterData.value.endTime)
  }
  slaughterDialogVisible.value = true
}

// 打开企业信息设置弹框
const openEnterpriseSettings = () => {
  // 反填现有数据
  if (EnterpriseData.value && Object.keys(EnterpriseData.value).length > 0) {
    enterpriseForm.id = EnterpriseData.value.id || 0
    enterpriseForm.companyName = EnterpriseData.value.companyName || ''
    enterpriseForm.address = EnterpriseData.value.address || ''
    enterpriseForm.companyDesc = EnterpriseData.value.companyDesc || ''
    enterpriseForm.sTime = EnterpriseData.value.sTime ? convertISOToElementFormat(EnterpriseData.value.sTime) : ''
    enterpriseForm.batch = route.query.batch as string || '' // 始终使用路由参数
  }
  enterpriseDialogVisible.value = true
}

// 保存屠宰信息
const saveSlaughterInfo = async () => {
  // 表单验证
  if (!slaughterFormRef.value) return
  
  try {
    await slaughterFormRef.value.validate()
    
    // 准备发送的数据，转换时间格式为ISO 8601格式
    const submitData = {
      ...slaughterForm,
      startTime: slaughterForm.startTime ? new Date(slaughterForm.startTime).toISOString() : null,
      endTime: slaughterForm.endTime ? new Date(slaughterForm.endTime).toISOString() : null
    }
    
    console.log('保存屠宰信息:', submitData)
    
    // 统一为重新添加，后端会先逻辑删除同批次数据，再重新添加
    Traceability.post('/Slaughter/AddSlaughter', submitData).then(res => {
      if (res.data.code == 300) {
        ElMessage.success('屠宰信息保存成功')
        getSlaughterInfo()
        slaughterDialogVisible.value = false
      } else {
        ElMessage.error(res.data.msg || '屠宰信息保存失败')
      }
    }).catch(error => {
      console.error('保存屠宰信息失败:', error)
      ElMessage.error('保存屠宰信息失败')
    })
  } catch (error) {
    console.log('表单验证失败:', error)
  }
}

// 保存企业信息
const saveEnterpriseInfo = async () => {
  // 表单验证
  if (!enterpriseFormRef.value) return
  
  try {
    await enterpriseFormRef.value.validate()
    
    // 准备发送的数据，转换时间格式为ISO 8601格式
    const submitData = {
      ...enterpriseForm,
      sTime: enterpriseForm.sTime ? new Date(enterpriseForm.sTime).toISOString() : null
    }
    
    console.log('保存企业信息:', submitData)
    
    // 统一为重新添加，后端会先逻辑删除同批次数据，再重新添加
    Traceability.post('/Slaughter/AddSlaughterCommpany', submitData).then(res => {
      if (res.data.code == 300) {
        ElMessage.success('企业信息保存成功')
        getEnterpriseInfo()
        enterpriseDialogVisible.value = false
      } else {
        ElMessage.error(res.data.msg || '企业信息保存失败')
      }
    }).catch(error => {
      console.error('保存企业信息失败:', error)
      ElMessage.error('保存企业信息失败')
    })
  } catch (error) {
    console.log('表单验证失败:', error)
  }
}

onMounted(() => {
  getSlaughterInfo()
  getEnterpriseInfo()
  fetchQualificationImages()
  fetchEnterprisePhotoImages()
})
</script>

<style scoped>
.slaughter-info {
  padding: 16px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 页面标题 */
.page-header {
  margin-bottom: 16px;
  text-align: center;
}

.page-header h2 {
  margin: 0 0 6px 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  margin: 0;
  color: #7f8c8d;
  font-size: 13px;
}

/* 卡片样式 */
.info-card {
  margin-bottom: 16px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.info-card:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.card-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.upload-tip {
  color: #909399;
  font-size: 11px;
  background: #f0f9ff;
  padding: 3px 6px;
  border-radius: 3px;
  border: 1px solid #b3d8ff;
}

/* 信息网格布局 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 12px 0;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item label {
  color: #606266;
  font-size: 12px;
  font-weight: 500;
}

.info-item span {
  color: #2c3e50;
  font-size: 14px;
  font-weight: 400;
  padding: 6px 10px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

/* 公司简介样式 */
.company-description {
  margin-top: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.company-description label {
  color: #606266;
  font-size: 12px;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

.company-description p {
  color: #2c3e50;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* 图片上传区域 */
.qualification-uploads,
.photo-uploads {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.uploaded-qualifications,
.uploaded-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.qualification-item,
.photo-item {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.qualification-item:hover,
.photo-item:hover {
  border-color: #409eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.qualification-item img,
.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.qualification-item:hover img,
.photo-item:hover img {
  transform: scale(1.05);
}

/* 相关资质图片样式 */
.qualification-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.img-delete-x {
  position: absolute;
  top: 4px;
  right: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.7);
  transition: all 0.3s ease;
  z-index: 10;
}

.img-delete-x:hover {
  background: rgba(255, 0, 0, 0.9);
  transform: scale(1.1);
}

.qualification-upload {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.qualification-upload:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.plus-icon {
  font-size: 24px;
  color: #999;
  transition: color 0.3s ease;
}

.qualification-upload:hover .plus-icon {
  color: #409eff;
}

/* 企业照片上传样式 */
.photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.photo-upload {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.photo-upload:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.photo-upload .plus-icon {
  font-size: 24px;
  color: #999;
  transition: color 0.3s ease;
}

.photo-upload:hover .plus-icon {
  color: #409eff;
}

.upload-btn {
  width: 100px;
  height: 100px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;
  transition: all 0.3s ease;
  background: #fafafa;
}

.upload-btn:hover {
  border-color: #409eff;
  color: #409eff;
  background: #f0f9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.upload-btn .el-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.upload-btn span {
  font-size: 10px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .slaughter-info {
    padding: 12px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .qualification-item,
  .photo-item,
  .upload-btn {
    width: 80px;
    height: 80px;
  }
  
  .upload-btn .el-icon {
    font-size: 20px;
  }
  
  .upload-btn span {
    font-size: 9px;
  }
}

/* 按钮样式优化 */
.el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #5a9eff 100%);
  border: none;
}

.el-button--primary:hover {
  background: linear-gradient(135deg, #5a9eff 0%, #409eff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-dialog__header) {
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  padding: 16px 20px;
  border-bottom: 1px solid #e9ecef;
}

:deep(.el-dialog__title) {
  color: #2c3e50;
  font-weight: 600;
  font-size: 16px;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  padding: 12px 20px 20px;
  border-top: 1px solid #e9ecef;
}
</style>


